<template>
  <!-- 热点文章详情页 -->
  <div id="justInTimedetail" class="justInTimedetail">
    <Header></Header>
    <!--本来应该是导航，（方便全局替换）-->
    <HHeader></HHeader>
    <div class="justInTimedetailCont">
      <div class="justInTimedetailCont_crumbs">
        <span>
          <router-link :to="{name:'home'}">首页</router-link>
        </span>
        <i class="iconfont icon-youjiantou"></i>
        <span>
          <router-link :to="{name:'justInTimeList'}">热点文章</router-link>
        </span>
        <i class="iconfont icon-youjiantou"></i>
        <span>正文</span>
      </div>
      <div
        class="justInTimedetailCont_cluster"
        v-for="(item,index) in justInTimedetailB"
        :key="index"
      >
        <div class="justInTimedetailCont_cluster_Left">
          <div class="acad_cluster_left_title">
            <span>{{item.Title}}</span>
          </div>
          <div class="acad_cluster_left_info_mocreate">
            <span>{{item.AddDate}}</span>
          </div>
          <div class="acad_cluster_left_info">
            <span v-html="item.Authors"></span>
            <span class="acad_cluster_left_info_webcreate" style="float:right;">{{item.AddDate}}</span>
          </div>
          <div class="acad_cluster_left_contB">
            <ul>
              <li
                :class="{justInTimedetailCont:justInTimedetailCont===0}"
                @click="justInTimedetailCont=0"
              >
                <a href="###">摘要</a>
              </li>
              <i>|</i>
              <li
                :class="{justInTimedetailCont:justInTimedetailCont===1}"
                @click="justInTimedetailCont=1"
              >
                <a href="###">论文信息</a>
              </li>
              <li style="float:right;">
                <!-- <i :class="isShow&&value==item.ContentID ? 'iconfont icon-xingxing3 cont':'iconfont icon-xingxing3'" @click="like(item,index,item.ContentID)" style="position: relative;font-size: 24px;left: 15px;top: 1px;"></i> -->
                <i
                  :class="isShow ? 'iconfont icon-xingxing3 cont':'iconfont icon-xingxing3'"
                  @click="like(item,index,item.ContentID)"
                  style="position: relative;font-size: 24px;left: 15px;top: 1px;"
                ></i>
                <span style="position: relative;left: 27px;font-size: 15px;top:-1px;">收藏</span>
              </li>
            </ul>
          </div>
          <div class="acad_cluster_left_cont">
            <ul v-show="justInTimedetailCont===0">
              <li>
                <p class="acad_cont_label">摘要</p>
                <p class="acad_cont_cont" v-html="item.Abstract"></p>
                <p class="acad_cont_type">
                  <span class="acad_cont_type_key">关键词：</span>
                  <span
                    class="acad_cont_typeKEY"
                    v-for="(itemc,index) in item.Keywords.split('；')"
                    :key="index"
                  >{{itemc}}</span>
                </p>
                <p class="acad_cont_label acad_cont_labelB">Abstract</p>
                <p class="acad_cont_cont" v-html="item.EnAbstract"></p>
                <p class="acad_cont_type">
                  <span class="acad_cont_type_key">Key words:</span>
                  <span
                    class="acad_cont_typeKEY"
                    v-for="(itemc,index) in item.EnKeywords.split('；')"
                    :key="index"
                  >{{itemc}}</span>
                </p>
                <p class="acad_cont_select">
                  <span @click="toMenu(LmurlB+item.FilePath)" class="moPDF">PDF查看</span>
                  <span @click="handleDownTemplate(item)" class="moDownLoad">立即下载</span>
                </p>
              </li>
            </ul>
            <ul v-show="justInTimedetailCont===1">
              <li class="titContent">
                <span class="titText">DOI:</span>
                <span class="conText">{{item.Doi}}</span>
              </li>
              <li class="titContent">
                <span class="titText">所属栏目：</span>
                <span class="conText">{{item.ChannelName}}</span>
              </li>
              <li class="titContent">
                <span class="titText">基金项目：</span>
                <span class="conText" v-html="item.Funds"></span>
              </li>
              <li class="titContent">
                <span class="titText">发布日期：</span>
                <span class="conText">{{item.AddDate}}</span>
              </li>
              <li class="titContent">
                <span class="titText">论文编号：</span>
                <span class="conText">{{item.ContentId}}</span>
              </li>
              <li class="titContent">
                <span class="titText">作者单位：</span>
                <span class="conText">{{item.WorkUnit}}</span>
              </li>
              <li class="titContent">
                <span class="titText">作者英文单位：</span>
                <span class="conText">{{item.EnKeywords}}</span>
              </li>
              <li class="titContent">
                <span class="titText">杂志社名称：</span>
                <span class="conText">{{item.organization}}</span>
              </li>
              <li class="titContent">
                <span class="titText">总页数：</span>
                <span class="conText">{{item.PageCount}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="justInTimedetailCont_cluster_Right">
          <JusTinTime></JusTinTime>
          <div class="just_cluster_righ_img">
            <img src="../../../../../static/syimg/xxg_10.png" />
          </div>
        </div>
        <div style="clear:both"></div>
      </div>
    </div>
    
    
    
  </div>
</template>

<script>
// import router from "@/router/index";
//juqery
import axios from "axios";
import util from "../../../../assets/script/util";

export default {
  name: "justInTimedetail",
  data() {
    return {
      downUrl: "",
      Lmurl: "http://bjlm.bosihw.cn",
      LmurlB: "http://bwapi.yywkt.com:7002/",
      justInTimedetailCont: 0,
      justInTimedetailB: [],
      essone: "",
      isShow: false,
      value: ""
    };
  },
  methods: {
    like(item, index, id) {
      let userName = sessionStorage.getItem("userName");
      if (userName) {
        if (this.isShow == false) {
          this.isShow = true;
          axios
            .post("/api/Lm/AddCollectRecord", {
              Type: "paper",
              Title: item.Title,
              organization: item.organization,
              Year: item.Year,
              Volume: item.Volume,
              Issue: item.Issue,
              PId: item.ContentID,
              AuthorId: parseInt(localStorage.getItem("AuthorId")),
              RealName: ""
            })
            .then(res => {
              this.$message({
                type: "success",
                message: "添加成功，请到个人中心查看!"
              });
            })
            .catch(e => {
              console.log(e);
            });
        } else if (this.isShow) {
          axios
            .post("/api/Lm/DeleteCollectRecord", {
              AuthorId: localStorage.getItem("AuthorId"),
              Type: "paper",
              PId: this.$route.query.id
            })
            .then(res => {
              this.isShow = false;
              this.$message({
                type: "error",
                message: "取消收藏"
              });
            })
            .catch(err => {
              console.log(err);
            });
        }
      } else {
        this.$confirm("请先登录", "提示", {
          customClass: "message-logout",
          confirmButtonText: "确定",
          cancelButtonText: "取消"
          // type: 'warning'
        })
          .then(() => {
            this.$uniRouter.push({
              path: "/login"
            });
          })
          .catch(e => {
            console.log(e);
          });
      }
    },
    getData() {
      axios
        .get(
          "http://bjlm.bosihw.cn/api/Lm/GetIssueContentInfo?ContentID=" +
            this.$route.query.id +
            "&AuthorId=" +
            localStorage.getItem("AuthorId")
        )
        .then(res => {
          this.justInTimedetailB = res.data.Data.Table||[];
          this.justInTimedetailB.forEach(item => {
            this.downUrl = item.FilePath;
            item.AddDate = item.AddDate.substr(0, 10);
            if (item.IsCollect == 1) {
              this.isShow = true;
            } else if (item.IsCollect == 0) {
              this.isShow = false;
            }
          });
        })
        .catch(function(e) {
          console.log(e);
        });
    },
    handleDownTemplate(item) {
      let userName = sessionStorage.getItem("userName");
      if (userName) {
        axios
          .post("/api/Lm/AddDownLoadRecord", {
            Type: "paper",
            Title: item.Title,
            organization: item.organization,
            Year: item.Year,
            Volume: item.Volume,
            Issue: item.Issue,
            PId: item.ContentID,
            AuthorId: parseInt(localStorage.getItem("AuthorId")),
            RealName: ""
          })
          .then(res => {
            this.$message({
              type: "success",
              message: "下载成功!"
            });
          })
          .catch(e => {
            console.log(e);
          });
      } else {
        this.$confirm("请先登录", "提示", {
          customClass: "message-logout",
          confirmButtonText: "确定",
          cancelButtonText: "取消"
          // type: 'warning'
        })
          .then(() => {
            this.$uniRouter.push({
              path: "/login"
            });
          })
          .catch(e => {
            console.log(e);
          });
      }
      // let url = this.Lmurl + '/api/Common/DownLoad?file=' + downUrl ;
      // util.download(url)
    },
    toMenu(url) {
      window.open(url);
    }
  },
  created() {
    this.getData();
    // console.log(localStorage.getItem('value'));
    // console.log(this.$route.query.id);
    // if(localStorage.getItem('value') == this.$route.query.id){
    //   this.isShow = localStorage.getItem('isShow');
    //   this.value = localStorage.getItem('value');
    // }
  },
  watch: {
    //监听相同路由下参数变化的时候，从而实现异步刷新
    $route(to, from) {
      //做一些路由变化的响应
      //打开加载动画
      this.loading = true;
      //重新获取数据
      this.getData();
      /** 初始化其他数据 */
      let pid = this.$route.query.id;
      if (pid) {
        this.initOther(id);
      }
    }
  }
};
</script>

<style lang="less" scoped>
#justInTimedetail {
  width: 100%;
  .justInTimedetailCont {
    width: 100%;
    height: 100%;
    display: inline-block;
    .justInTimedetailCont_crumbs {
      width: 1140px;
      height: 20px;
      margin: 0 auto;
      position: relative;
      margin-top: 28px;
      text-align: left;
      line-height: 20px;
      padding-left: 10px;
      span:nth-child(1) a,
      span:nth-child(3) a {
        color: #000000;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
      }
      i {
        color: #767c82;
        font-size: 18px;
        margin-left: 10px;
        font-weight: bold;
      }
      span:nth-child(5) {
        color: #003c80;
        font-size: 16px;
        margin-left: 10px;
        font-weight: bold;
        cursor: pointer;
      }
    }
    .justInTimedetailCont_cluster {
      width: 1140px;
      height: 100%;
      margin: 0 auto;
      margin-top: 28px;
      .justInTimedetailCont_cluster_Left {
        width: 856px;
        height: auto;
        position: relative;
        float: left;
        .acad_cluster_left_title {
          width: 100%;
          height: 20px;
          line-height: 20px;
          span:nth-child(1) {
            float: left;
            font-size: 20px;
            color: #000;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            /* autoprefixer: off */
            -webkit-box-orient: vertical;
            /* autoprefixer: on */
            em {
              font-style: normal;
              float: right;
              color: #909090;
              font-size: 16px;
              position: absolute;
              right: 0;
            }
          }
          span:nth-child(2) {
            float: right;
            color: #909090;
            font-size: 16px;
          }
        }
        .acad_cluster_left_info {
          margin-top: 18px;
          width: 100%;
          height: 39px;
          line-height: 18px;
          span {
            color: #8b8b8b;
            font-size: 14px;
            letter-spacing: 0px;
            word-spacing: 13px;
          }
        }
        .acad_cluster_left_contB {
          width: 100%;
          margin-top: 15px;
          position: relative;
          ul:nth-child(1) {
            width: 100%;
            height: 32px;
            position: relative;
            .justInTimedetailCont {
              background: #003c80;
              a {
                color: #fff !important;
              }
            }
            i {
              font-style: normal;
              font-size: 16px;
              position: absolute;
              color: #eee;
              top: 4px;
            }
            i:nth-child(2) {
              left: 12%;
            }
            i:nth-child(4) {
              left: 27%;
            }
            i:nth-child(6) {
              left: 41%;
            }
            li {
              list-style: none;
              float: left;
              width: 92px;
              height: 32px;
              line-height: 32px;
              text-align: center;
              margin-right: 30px;
              a {
                color: #000000;
                font-size: 16px;
              }
            }
          }
        }
        .acad_cluster_left_cont {
          // padding-top:15px;
          overflow: hidden;
          overflow-y: auto;
          width: 100%;
          height: auto;
          margin-top: 21px;
          ul:nth-child(1) {
            width: 100%;
            height: 32px;
            position: relative;
            .justInTimedetailCont {
              background: #003c80;
              a {
                color: #fff !important;
              }
            }
            i {
              font-style: normal;
              font-size: 16px;
              position: absolute;
              color: #eee;
              top: 4px;
            }
            i:nth-child(2) {
              left: 12%;
            }
            li {
              list-style: none;
              float: left;
              width: 92px;
              height: 32px;
              line-height: 32px;
              text-align: center;
              margin-right: 30px;
              a {
                color: #000000;
                font-size: 16px;
              }
            }
          }
          ul:nth-child(1) {
            width: 100%;
            margin-top: 15px;
            position: relative;
            li {
              list-style: none;
              width: 100%;
              height: auto;
              float: left;
              cursor: pointer;
              padding: 15px 9px;
              background: #fff;
              .acad_cont_label {
                color: #000000;
                font-size: 16px;
                font-weight: bold;
                text-align: left;
              }
              .acad_cont_labelB {
                margin-top: 11px;
              }
              .acad_cont_cont {
                margin-top: 10px;
                color: #000000;
                font-size: 16px;
                line-height: 30px;
                letter-spacing: 1px;
                text-align: justify;
              }
              .acad_cont_type {
                margin-top: 20px;
                width: 100%;
                height: 69px;
                .acad_cont_type_key {
                  color: #000000;
                  font-size: 16px;
                  float: left;
                }
                .acad_cont_typeKEY {
                  float: left;
                  padding: 0 10px;
                  // height:22px;
                  background: #c0c0c0;
                  color: #ffffff;
                  font-size: 14px;
                  text-align: center;
                  border-radius: 5px;
                  margin-left: 15px;
                  line-height: 22px;
                  margin-bottom: 16px;
                }
                .acad_cont_typeKEY:hover {
                  background: #003c80;
                }
              }
              .acad_cont_select {
                margin-top: 66px;
                width: 100%;
                height: 30px;
                span {
                  float: right;
                  width: 94px;
                  height: 30px;
                  border-radius: 5px;
                  border: 1px solid #c0c0c0;
                  color: #c0c0c0;
                  font-size: 14px;
                  line-height: 30px;
                  text-align: center;
                  margin-left: 30px;
                }
                span:nth-child(2) {
                  background: #003c80;
                  color: #fff;
                }
                span:hover {
                  background: #003c80;
                  color: #fff;
                }
              }
            }
          }
          ul:nth-child(2) {
            width: 100%;
            margin-top: 15px;
            position: relative;
            li {
              width: 100%;
              height: auto;
              line-height: 40px;
              list-style: none;
              position: relative;
              .titText {
                display: inline-block;
                font-size: 17px;
                width: 22%;
                font-weight: bold;
                text-align: left;
                position: absolute;
              }
              .conText {
                display: inline-block;
                width: 60%;
                height: auto;
                text-align: left;
                font-size: 17px;
                position: relative;
                left: 25%;
              }
            }
          }
        }
      }
      .justInTimedetailCont_cluster_Right {
        width: 265px;
        float: right;
        border-left: 1px solid #eeeeee;
        position: relative;
        .just_cluster_righ_img {
          margin-left: 19px;
          margin-top: 28px;
          width: 250px;
          height: 163px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.cont {
  color: #003c80 !important;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.grid-content {
  border-radius: 4px;
  min-height: 32px;
  line-height: 32px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/deep/.el-col-3 {
  width: 12.5%;
  text-align: left;
}
/deep/.el-col-21 {
  width: 87.5%;
}
// @media screen and (max-width:1280px){
//   .justInTimedetailCont_crumbs{
//     max-width: 800px;
//   }
//   .justInTimedetailCont_cluster{
//     max-width: 800px;
//   }
// }
@media screen and (min-width: 1010px) {
  .acad_cluster_left_info_mocreate {
    display: none;
  }
}
@media screen and (max-width: 1010px) {
  .justInTimedetailCont_cluster_Right {
    display: none;
  }
  .moPDF {
    background: #c0c0c0;
    color: #fff !important;
  }
  .moDownLoad {
    background: #003c80;
    color: #fff !important;
  }
  .acad_cluster_left_title {
    height: auto !important;
    span {
      float: none !important;
    }
  }
  .acad_cluster_left_info_webcreate {
    display: none;
  }
  .acad_cluster_left_info_mocreate {
    height: auto !important;
    margin-top: 10px !important;
    line-height: 23px !important;
    span {
      color: #8b8b8b;
      font-size: 14px;
      letter-spacing: 0px;
      word-spacing: 13px;
    }
  }
  .titText {
    width: 37% !important;
  }
  .conText {
    left: 43% !important;
  }
  .justInTimedetailCont_crumbs {
    display: none;
  }
  .justInTimedetailCont {
    // margin-top: 70px;
    .justInTimedetailCont_cluster {
      width: 94% !important;
      margin-top: 98px !important;
      .justInTimedetailCont_cluster_Left {
        width: 100% !important;
        .acad_cluster_left_title {
          line-height: 30px !important;
          text-align: justify;
        }
        .acad_cluster_left_info {
          height: auto !important;
          margin-top: 10px !important;
          line-height: 23px !important;
          span {
            margin-top: 5px;
            // float: left;
            width: 100%;
          }
        }
        .acad_cluster_left_cont {
          margin-top: 0 !important;
        }
      }
    }
  }
  .acad_cluster_left_contB {
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
    ul {
      width: 163% !important;
      li {
        width: 15% !important;
      }
      i {
        display: none;
      }
    }
  }
  .acad_cluster_left_contB::-webkit-scrollbar {
    display: none;
  }
  .acad_cont_type {
    height: 103px !important;
    .acad_cont_typeKEY {
      width: 71%;
      // height:30px!important;
      line-height: 30px !important;
      margin-bottom: 10px !important;
      font-size: 16px !important;
      margin-left: 80px !important;
    }
  }
  .acad_cont_select {
    span {
      width: 45% !important;
      margin-left: 0px !important;
    }
    span:nth-child(1) {
      margin-left: 32px !important;
    }
  }
}
</style>
<style>
@media screen and (max-width: 1010px) {
  .message-logout {
    width: 80% !important;
  }
}
</style>